<template>
  <view class="wrap" :style="{height:statuHeight+'px'}">
     <top-tab tabTitle="我的资料" @backClick="backClick" backColor="#5B2177"></top-tab>
		 <view class="main">
			<view class="item-list" @click="jump('/pages/my/set/user')">
				<view class="title">头像</view>
				<view class="img-icon">
					<image class="img" src="../../../static/home/portrait_a.jpg" mode="aspectFill"></image>
					<uni-icons type="arrowright" style="font-family: uniicons !important;" color=" #999999" class="iconfont" size="20"></uni-icons>
				</view>
			</view>
			<view class="item-list-input">
				<view class="title">昵称</view>
				<input placeholder="请输入昵称" placeholder-style="font-size: 24rpx;color: #999999;"/>
			</view>
			<view class="item-list-input">
				<view class="title">个人描述</view>
				<input placeholder="请输入个人描述" placeholder-style="font-size: 24rpx;color: #999999;"/>
			</view>
			<view class="item-list-input">
				<view class="title">手机号码</view>
				<input placeholder="请输入手机号码" placeholder-style="font-size: 24rpx;color: #999999;"/>
			</view>
			<view class="item-list-radio">
				<view class="title">性别</view>
				<view class="img-icon">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in sex" :key="item.value">
							<radio :value="item.value" :checked="item.checked" /><span style="font-size: 30rpx;font-family: PingFang SC;font-weight: 500;color: #333333;">{{item.label}}</span>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="item-list">
				<view class="title">会员等级</view>
				<view class="img-icon" style="padding-right: 71rpx;font-size: 30rpx;font-family: PingFang SC;font-weight: 500;color: #333333;">黄金会员</view>
			</view>
		</view>
		<view class="footer-btn">确定更改</view>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
  export default {
		components: { topTab },
    data() {
      return {
				sex: [
					{	label: "男",	value: 0,	checked: true }, 
					{ label: "女",	value: 1 },
				],
				statuHeight: uni.getSystemInfoSync().screenHeight,
			}
    },
  onShow() {},
  methods: {
		// 单选框事件
		 radioChange(e) {
				
		},
		// 跳页面
		jump(path) {
			uni.navigateTo({
				url: path
			})
		},
		// 返回
		backClick() {
			uni.switchTab({
			   url: '/pages/my/index'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	.wrap{
		background: #F2F2F2;	
	}
	.main{
		.item-list,.item-list-radio{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #FFFFFF;
			padding: 36rpx 25rpx;
			margin-top: 35rpx;
			.title{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.img-icon{
				display: flex;
				align-items: center;
				.img{
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
			}
		}
		.item-list-input{
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			padding: 0rpx 25rpx;
			margin-top: 35rpx;
			height: 100rpx;
			line-height: 100rpx;
			.title{
				width: 120rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-right: 36rpx;
			}
			input{
				height: 100rpx;
				line-height: 100rpx;
			}
		}
		.item-list-radio{
			.uni-list-cell{
				margin-right: 67rpx;
				/deep/ .uni-radio-input {
					width: 24rpx !important;
					height: 24rpx !important;
					background:#FFFFFF !important;
				}
				/deep/ .uni-radio-input-checked{
					border: 1px solid #7F2EE1 !important;
				}
				/deep/ .uni-radio-input-checked:before {
				    font: normal normal normal 14px/1 uni;
				    content: "\EA08";
				    color: #7F2EE1 !important;
				    font-size: 10px;
				    position: absolute;
				    top: 50%;
				    left: 50%;
				    transform: translate(-50%,-48%) scale(.73);
				    -webkit-transform: translate(-50%,-48%) scale(.7);
				}
			}
		}
	}
	.footer-btn{
		width: 540rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #B83DF1, #852CAE);
		border-radius: 44rpx;
		line-height: 44px;
		text-align: center;
		margin: auto;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 100rpx;
	}
</style>
